<template>
    <!-- component/table/index.wxml -->
    <view>
        <view class="table">
            <view class="tr">
                <view class="th th1">{{ thList[0] }}</view>
                <view class="th th2">{{ thList[1] }}</view>
                <view class="th th3">{{ thList[2] }}</view>
            </view>

            <view class="tr" v-for="(item, index) in tdList" :key="index">
                <view class="td td1">{{ item.name }}</view>

                <view class="td td2">{{ item.ratio }}</view>

                <view class="td td3">{{ item.way }}</view>
            </view>
        </view>
    </view>
</template>

<script>
// component/table/index.js
export default {
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        thList: {
            type: Array
        },
        tdList: {
            type: Array
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {}
};
</script>
<style>
/* component/table/index.wxss */
/* 表格 */
.table {
    border: 1px solid #dadada;
    border-right: 0;
    border-bottom: 0;
    width: 98%;
    margin-left: 1%;
}
.tr {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.th,
.td {
    padding: 10px;
    border-bottom: 1px solid #dadada;
    border-right: 1px solid #dadada;
    text-align: center;
    width: 100%;
}
.th1,
.th2,
.td1,
.td2 {
    width: 40%;
}
.th {
    font-weight: 800;
    font-size: 28rpx;
    color: #000;
}
.td {
    font-size: 20rpx;
    color: #666;
}
</style>
